<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <p>我是p1111</p>
      <p class="active">我是p2222</p>
      <p>我是p3333</p>
    </div>
    <button>点击</button>
    <script>
      //元素操作  : 增删改查
      //元素的新增
      //一.创建元素document.createElement("元素名")
      //只能在document里面创建
      var ele = document.createElement("div");
      ele.innerHTML = "嘻嘻嘻";
      console.log(ele);

      //二.把创建出来的元素 添加到document里面
      //1.父元素.appendChild(元素对象)
      var btn = document.querySelector("button");
      var containerEle = document.querySelector(".container");
      btn.onclick = function () {
        containerEle.appendChild(ele);
        //containerEle.innerHTML = "添加的内容"; //会直接替换掉全部内容
        // containerEle.appendChild("<div>hello</div>");错误写法
        // containerEle.innerHTML = ele; //错误写法
      };

      //和innerHTML的区别

      //1.innerHTML是=号赋值  appendChild();
      //2.innerHTML会覆盖之前的内容  appendChild 会在之前的内容基础上追加,加载最后面

      //3.innerHTML后是一个字符串  appendChild()里面是一个元素对象

      //2.把创建的元素  添加到某个元素之前
      //父元素.insertBefore(newElement,oldElement)
      var containerEle = document.querySelector(".container");
      var pEle = document.querySelector(".active");
      var btn = document.querySelector("button");
      btn.onclick = function () {
        containerEle.insertBefore(ele, pEle);
      };
    </script>
  </body>
</html>
